import React from 'react';
import Facialmaskylcs from './Facialmaskylcs.js'
import Zujhimg from '../img/diy/gongxiao.png'
import {addTouch} from './ScrollAct.js'
class Facialmaskpage1 extends React.Component {
	constructor(props) {
	    super(props);
	    this.state = {
	        title:'植物精华',
            zhiwujinghua1:{
                dname:"",
                name:""
            },
            zhiwujinghua2:{
                dname:"",
                name:""
            },
            zhiwujinghua3:{
                dname:"",
                name:""
            },
            words: [
                {
                    "title": "芦荟",
                    "description": "深层滋养润泽，肌肤由内而外饱满充盈，重现柔滑水灵质感。"
                },
                {
                    "title": "白芨",
                    "description": "汉方植物修护，均匀透亮肌肤，令肌肤柔润丝滑，换发水嫩亮采。"
                },
                {
                    "title": "木瓜",
                    "description": "粉嫩亮肤，水润滋养，调理肤质。"
                },
                {
                    "title": "青瓜",
                    "description": "补充肌肤丰沛清润水分，润滑肌肤，帮助倦怠肌肤焕发活力。"
                },
                {
                    "title": "绿茶",
                    "description": "深层清洁毛孔多余油分、紧致毛孔，减少痘痘再次侵扰。"
                },
                {
                    "title": "石榴",
                    "description": "提升肌肤动感能量，提高肌肤弹性光泽，令肌肤鲜活莹润、雪润焕采!"
                }
            ]
	    }
	}
	componentWillMount(){

	}

    componentDidMount(){     
        this.selectCondition()
    }
    selectCondition(){
        var _this=this
        var items=document.querySelectorAll(".fmp5-select-content");
        for(let i=0;i<items.length;i++){
            items[i].addEventListener("click",function(e){ 
                document.getElementById("fmp5-model"+i).style.display="block"
            });
        }
        var mitem1=document.querySelectorAll(".fmp5-mselect-content1");
        for(let i=0;i<mitem1.length;i++){
            mitem1[i].flag=false;
            mitem1[i].index=i;
            mitem1[i].addEventListener('click',function(e){
                this.flag=(this.flag==true)?false:true;
                mclickEvt1(this)
            })
        }
        var mclickEvt1=function(ele){
            if(ele.flag){
                let zhiwujinghua1
                if(ele.index==0){
                    zhiwujinghua1={
                        dname:"芦荟(提取液)",
                        name:"luhui"
                    }
                }else{
                    zhiwujinghua1={
                        dname:"白芨(提取液)",
                        name:"baiji"
                    }
                }
                _this.setState({
                    zhiwujinghua1:zhiwujinghua1
                })
            }else{
                _this.setState({
                    zhiwujinghua1:{
                        dname:"",
                        name:""
                    }
                })
            }
            _this.props.callback(_this.state.zhiwujinghua1);
            
            var a = [];
            var p = ele.parentNode.children;
            for(var i = 0;i<p.length;i++) {
                if(p[i] !== ele) a.push(p[i]);
            }
            for(let j=0;j<a.length;j++){
                a[j].classList.remove("fmp-select-content-active")
                a[j].querySelector(".fmp-sc-icon").classList.remove("fmp-sc-icon-active")
                a[j].flag=false;
            }
            ele.classList.toggle("fmp-select-content-active")
            ele.querySelector(".fmp-sc-icon").classList.toggle("fmp-sc-icon-active")
        }
        var mitem2=document.querySelectorAll(".fmp5-mselect-content2");
        for(let i=0;i<mitem2.length;i++){
            mitem2[i].flag=false;
            mitem2[i].index=i;
            mitem2[i].addEventListener('click',function(e){
                this.flag=(this.flag==true)?false:true;
                mclickEvt2(this)
            })
        }
        var mclickEvt2=function(ele){
            if(ele.flag){
                let zhiwujinghua2
                if(ele.index==0){
                    zhiwujinghua2={
                        dname:"木瓜(提取液)",
                        name:"mugua"
                    }
                }else{
                    zhiwujinghua2={
                        dname:"黄瓜(提取液)",
                        name:"huanggua"
                    }
                }
                _this.setState({
                    zhiwujinghua2:zhiwujinghua2
                })
            }else{
                _this.setState({
                    zhiwujinghua2:{
                        dname:"",
                        name:""
                    }
                })
            }
            _this.props.callback2(_this.state.zhiwujinghua2);
            
            var a = [];
            var p = ele.parentNode.children;
            for(var i = 0;i<p.length;i++) {
                if(p[i] !== ele) a.push(p[i]);
            }
            for(let j=0;j<a.length;j++){
                a[j].classList.remove("fmp-select-content-active")
                a[j].querySelector(".fmp-sc-icon").classList.remove("fmp-sc-icon-active")
                a[j].flag=false;
            }
            ele.classList.toggle("fmp-select-content-active")
            ele.querySelector(".fmp-sc-icon").classList.toggle("fmp-sc-icon-active")
        }
        var mitem3=document.querySelectorAll(".fmp5-mselect-content3");
        for(let i=0;i<mitem3.length;i++){
            mitem3[i].flag=false;
            mitem3[i].index=i;
            mitem3[i].addEventListener('click',function(e){
                this.flag=(this.flag==true)?false:true;
                mclickEvt3(this)
            })
        }
        var mclickEvt3=function(ele){
            if(ele.flag){
                let zhiwujinghua3
                if(ele.index==0){
                    zhiwujinghua3={
                        dname:"绿茶(提取液)",
                        name:"lvcha"
                    }
                }else{
                    zhiwujinghua3={
                        dname:"石榴(提取液)",
                        name:"shiliu"
                    }
                }
                _this.setState({
                    zhiwujinghua3:zhiwujinghua3
                })
            }else{
                _this.setState({
                    zhiwujinghua3:{
                        dname:"",
                        name:""
                    }
                })
            }
            _this.props.callback3(_this.state.zhiwujinghua3);
            
            var a = [];
            var p = ele.parentNode.children;
            for(var i = 0;i<p.length;i++) {
                if(p[i] !== ele) a.push(p[i]);
            }
            for(let j=0;j<a.length;j++){
                a[j].classList.remove("fmp-select-content-active")
                a[j].querySelector(".fmp-sc-icon").classList.remove("fmp-sc-icon-active")
                a[j].flag=false;
            }
            ele.classList.toggle("fmp-select-content-active")
            ele.querySelector(".fmp-sc-icon").classList.toggle("fmp-sc-icon-active")
        }
    }
    clickScroll(){
        this.props.clickBack(5);
    }
    confirmModel1(){
        var items=document.querySelectorAll(".fmp5-select-content")
        if(this.state.zhiwujinghua1.dname!=""){
            items[0].classList.add("fmp-select-content-act")
            items[0].querySelector(".fmp-sc-icon").classList.add("fmp-sc-icon-active")
        }else{
            items[0].classList.remove("fmp-select-content-act")
            items[0].querySelector(".fmp-sc-icon").classList.remove("fmp-sc-icon-active")
        }
        document.getElementById("fmp5-model0").style.display="none"
    }
    confirmModel2(){
        var items=document.querySelectorAll(".fmp5-select-content")
        if(this.state.zhiwujinghua2.dname!=""){
            items[1].classList.add("fmp-select-content-act")
            items[1].querySelector(".fmp-sc-icon").classList.add("fmp-sc-icon-active")
        }else{
            items[1].classList.remove("fmp-select-content-act")
            items[1].querySelector(".fmp-sc-icon").classList.remove("fmp-sc-icon-active")
        }
        document.getElementById("fmp5-model1").style.display="none"
    }
    confirmModel3(){
        var items=document.querySelectorAll(".fmp5-select-content")
        if(this.state.zhiwujinghua3.dname!=""){
            items[2].classList.add("fmp-select-content-act")
            items[2].querySelector(".fmp-sc-icon").classList.add("fmp-sc-icon-active")
        }else{
            items[2].classList.remove("fmp-select-content-act")
            items[2].querySelector(".fmp-sc-icon").classList.remove("fmp-sc-icon-active")
        }
        document.getElementById("fmp5-model2").style.display="none"
    }
    returnOrder(){
        this.props.clickRetOrder(6)
    }
    render() {
        return (
            <div className="fmp-container" style={{top: "400%"}} id="fmpage5">
            	<div className="fmt-container boxshaw" style={{width:"2.3rem"}}>
                    <div className="fmt-container-circle">
                        <div className="fmt-container-circle-line"></div>
                    </div>
                    <span style={{fontSize:"0.5rem"}}>{this.state.title}</span>
                </div>
            	<Facialmaskylcs words={this.state.words}/>
            	<div className="fmp-sign">
                    <div className="fmp-sign-img">
                        <img src={Zujhimg}/>
                    </div>
                    <div className="fmp-sign-wz">
                        <p>&nbsp;小懒系列漫画之</p>
                        <p>《萌拼面膜研究》</p>
                    </div>
                     {this.props.isreturn?
                    <div className="fmp-sign-return" onClick={this.returnOrder.bind(this)}>
                        返回订单
                    </div>:""}
                </div>
                <p className="bn-tishi">《《请上下滑动切换选择成分》》</p>
                <div className="fmp-select boxshaw">
                    <div className="fmp-select-title">
                        <p>根据需要挑选添加<span className="fmp-select-title-span">植物精华</span>吧<i className="iconfont">&#xe616;</i></p>
                    </div>
                    <ul className="fmp-select-row"> 
                        <li className="fmp-select-content fmp5-select-content">
                            <i className="iconfont fmp-sc-icon">&#xe73d;</i>                 
                            <div className="fmp-sc-detail">
                                {this.state.zhiwujinghua1.dname!=''?
                                <p>{this.state.zhiwujinghua1.dname.substring(0,2)}<br/>{this.state.zhiwujinghua1.dname.substring(2)}</p>:
                                <p>芦荟<br/>or<br/>白芨<br/>(舒缓修护)</p>}
                            </div>
                        </li>
                        <li className="fmp-select-content fmp5-select-content">
                            <i className="iconfont fmp-sc-icon">&#xe73d;</i>
                            <div className="fmp-sc-detail">
                                {this.state.zhiwujinghua2.dname!=''?
                                <p>{this.state.zhiwujinghua2.dname.substring(0,2)}<br/>{this.state.zhiwujinghua2.dname.substring(2)}</p>:
                                <p>木瓜<br/>or<br/>黄瓜<br/>(补水滋润)</p>}
                            </div>
                        </li>
                        <li className="fmp-select-content fmp5-select-content">
                            <i className="iconfont fmp-sc-icon">&#xe73d;</i>
                            <div className="fmp-sc-detail">
                                {this.state.zhiwujinghua3.dname!=''?
                                <p>{this.state.zhiwujinghua3.dname.substring(0,2)}<br/>{this.state.zhiwujinghua3.dname.substring(2)}</p>:
                                <p>绿茶<br/>or<br/>石榴<br/>(祛痘美白)</p>}
                            </div>
                        </li>
                    </ul>
                    <div className="fmp-select-tip">
                        <div className="fmp5-st-exp fmp-select-tip-active"><i className="iconfont fmp-select-tip-icon">&#xe629;</i><span className="fmp-select-tip-iconwz">植物精华添加</span><p className="fmp-select-tip-wz">选择植物萃取精华定制你的面膜属性吧！</p></div>
                    </div>
                    <div className="fmp-select-bottom">
                        <i className="iconfont" onClick={this.clickScroll.bind(this)}>&#xe66f;</i>
                    </div>
                </div>
                <div className="fmp-model" id="fmp5-model0" >
                    <div className="fmp-model-cover"></div>     
                    <div className="fmp-select fmp-model-select" style={{marginTop:"1.5rem"}}>
                        <div className="fmp-select-cricle">
                            <div className="fmp-select-cricle-circleLeft">
                                <div className="fmp-select-cricle-lineLeft"></div>  
                            </div>
                            <div className="fmp-select-cricle-circleRight">
                                <div className="fmp-select-cricle-lineRight"></div>
                            </div>
                        </div>
                        <div className="fmp-select-title">
                            <p>请点击下面选项进行挑选吧<i className="iconfont">&#xe616;</i></p>
                        </div>
                        <ul className="fmp-select-row"> 
                            <li className="fmp-select-content fmp5-mselect-content1">
                                <i className="iconfont fmp-sc-icon">&#xe73d;</i>                 
                                <div className="fmp-sc-detail">
                                    <p>芦荟<br/>(提取液)</p>
                                </div>
                            </li>
                            <li className="fmp-select-content fmp5-mselect-content1">
                                <i className="iconfont fmp-sc-icon">&#xe73d;</i>
                                <div className="fmp-sc-detail">
                                    <p>白芨<br/>(提取液)</p>
                                </div>
                            </li>
                        </ul>   
                        <div className="fmp-select-tip">
                            <div className="fmp5-mst-explain" style={{display:"block"}}><span className="fmp-select-tip-iconwz">适合肌肤：</span><p className="fmp-select-tip-wz">夏日晒后缺水肤质，皮肤损伤，暗哑细纹。</p></div>
                            <div className="fmp5-mst-explain" style={{display:"block"}}><i className="iconfont fmp-select-tip-icon">&#xe629;</i><span className="fmp-select-tip-iconwz">芦荟：</span><p className="fmp-select-tip-wz">深层滋润润泽，肌肤由内而外饱满充盈，重现柔滑水灵质感。</p></div>
                            <div className="fmp5-mst-explain" style={{display:"block"}}><i className="iconfont fmp-select-tip-icon">&#xe629;</i><span className="fmp-select-tip-iconwz">白芨：</span><p className="fmp-select-tip-wz">汉方植物修复，均匀透亮肌肤，令肌肤柔润丝滑，焕发水嫩亮采</p></div>
                        </div>
                        <div className="fmp-select-bottom">
                            <span onClick={this.confirmModel1.bind(this)}>确定</span>
                        </div>   
                    </div>
                </div>
                <div className="fmp-model" id="fmp5-model1" >
                    <div className="fmp-model-cover"></div>     
                    <div className="fmp-select fmp-model-select" style={{marginTop:"1.5rem"}}>
                        <div className="fmp-select-cricle">
                            <div className="fmp-select-cricle-circleLeft">
                                <div className="fmp-select-cricle-lineLeft"></div>  
                            </div>
                            <div className="fmp-select-cricle-circleRight">
                                <div className="fmp-select-cricle-lineRight"></div>
                            </div>
                        </div>
                        <div className="fmp-select-title">
                            <p>请点击下面选项进行挑选吧<i className="iconfont">&#xe616;</i></p>
                        </div>
                        <ul className="fmp-select-row"> 
                            <li className="fmp-select-content fmp5-mselect-content2">
                                <i className="iconfont fmp-sc-icon">&#xe73d;</i>                 
                                <div className="fmp-sc-detail">
                                    <p>木瓜<br/>(提取液)</p>
                                </div>
                            </li>
                            <li className="fmp-select-content fmp5-mselect-content2">
                                <i className="iconfont fmp-sc-icon">&#xe73d;</i>
                                <div className="fmp-sc-detail">
                                    <p>黄瓜<br/>(提取液)</p>
                                </div>
                            </li>
                        </ul>   
                        <div className="fmp-select-tip">
                            <div className="fmp5-mst-explain" style={{display:"block"}}><span className="fmp-select-tip-iconwz">适合肌肤：</span><p className="fmp-select-tip-wz">熬夜暗沉，枯黄干燥，长期遭受辐射肤质</p></div>
                            <div className="fmp5-mst-explain" style={{display:"block"}}><i className="iconfont fmp-select-tip-icon">&#xe629;</i><span className="fmp-select-tip-iconwz">木瓜：</span><p className="fmp-select-tip-wz">粉嫩亮肤，水润滋养，调理肤质。</p></div>
                            <div className="fmp5-mst-explain" style={{display:"block"}}><i className="iconfont fmp-select-tip-icon">&#xe629;</i><span className="fmp-select-tip-iconwz">青瓜：</span><p className="fmp-select-tip-wz">补充肌肤丰沛清润水分，润滑肌肤，帮助倦怠肌肤焕发活力。</p></div>
                        </div>
                        <div className="fmp-select-bottom">
                            <span onClick={this.confirmModel2.bind(this)}>确定</span>
                        </div>   
                    </div>
                </div>
                <div className="fmp-model" id="fmp5-model2" >
                    <div className="fmp-model-cover"></div>     
                    <div className="fmp-select fmp-model-select" style={{marginTop:"1.5rem"}}>
                        <div className="fmp-select-cricle">
                            <div className="fmp-select-cricle-circleLeft">
                                <div className="fmp-select-cricle-lineLeft"></div>  
                            </div>
                            <div className="fmp-select-cricle-circleRight">
                                <div className="fmp-select-cricle-lineRight"></div>
                            </div>
                        </div>
                        <div className="fmp-select-title">
                            <p>请点击下面选项进行挑选吧<i className="iconfont">&#xe616;</i></p>
                        </div>
                        <ul className="fmp-select-row"> 
                            <li className="fmp-select-content fmp5-mselect-content3">
                                <i className="iconfont fmp-sc-icon">&#xe73d;</i>                 
                                <div className="fmp-sc-detail">
                                    <p>绿茶<br/>(提取液)</p>
                                </div>
                            </li>
                            <li className="fmp-select-content fmp5-mselect-content3">
                                <i className="iconfont fmp-sc-icon">&#xe73d;</i>
                                <div className="fmp-sc-detail">
                                    <p>石榴<br/>(提取液)</p>
                                </div>
                            </li>
                        </ul>   
                        <div className="fmp-select-tip">
                            <div className="fmp5-mst-explain" style={{display:"block"}}><span className="fmp-select-tip-iconwz">适合肌肤：</span><p className="fmp-select-tip-wz">痘痘，粉刺，痘痕问题皮肤，暗沉无弹性，油性肤质</p></div>
                            <div className="fmp5-mst-explain" style={{display:"block"}}><i className="iconfont fmp-select-tip-icon">&#xe629;</i><span className="fmp-select-tip-iconwz">绿茶：</span><p className="fmp-select-tip-wz">深层清洁毛孔多余油分、紧致毛孔，减少痘痘再次侵扰</p></div>
                            <div className="fmp5-mst-explain" style={{display:"block"}}><i className="iconfont fmp-select-tip-icon">&#xe629;</i><span className="fmp-select-tip-iconwz">石榴：</span><p className="fmp-select-tip-wz">提升肌肤动感能量，提高肌肤弹性光泽，令肌肤鲜活莹润、雪润焕采!</p></div>
                        </div>
                        <div className="fmp-select-bottom">
                            <span onClick={this.confirmModel3.bind(this)}>确定</span>
                        </div>   
                    </div>
                </div>
            </div>
        )
    }
}


export default Facialmaskpage1;